<script setup lang="ts">
  import { defineProps, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { cancelTask, queryAgvStatus } from '@/api/les';

  const props = defineProps<{
    tableData: any;
  }>();
  // AO数据头
  const aoColumns: any[] = [
    {
      title: '序号',
      dataIndex: 'index',
      slotName: 'index',
      align: 'center',
    },
    {
      title: '任务编号',
      dataIndex: 'taskCode',
    },
    {
      title: '任务类型',
      dataIndex: 'taskType',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '任务状态',
      dataIndex: 'taskStatus',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '起始位置',
      dataIndex: 'carStartPosition',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '结束位置',
      dataIndex: 'carEndPosition',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '报文',
      // dataIndex: '',
      // sortable: {
      //   sortDirections: ['ascend', 'descend'],
      // },
      width: '120',
    },
    {
      title: '备注',
      // dataIndex: '',
      // sortable: {
      //   sortDirections: ['ascend', 'descend'],
      // },
      width: '140',
    },
    {
      title: '执行时间',
      dataIndex: 'taskExecuteTime',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      align: 'center',
    },
  ];
  const newColumns: any[] = [
    {
      title: '机器人编号←',
      dataIndex: 'robotCode',
    },
    {
      title: '机器人电量',
      dataIndex: 'battery←',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'X坐标',
      dataIndex: 'posX',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'Y坐标',
      dataIndex: 'posY',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '所在地图',
      dataIndex: 'mapCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '速度',
      dataIndex: 'speed',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '状态',
      dataIndex: 'status',
    },
  ];

  const booleanStore = useBooleanStore();
  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.responseBody?.records || [];
      // localTableData.value = [];
      total.value = props.tableData?.responseBody?.total || 0;
      // total.value = 0;
    },
    { immediate: true }
  );

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }

  // 撤销
  async function onDel(record: any) {
    const data = await cancelTask({ taskCode: record.taskCode });
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  }

  // 详情
  const showDrawer = ref<boolean>(false);
  const taskList = ref<any[]>([]);
  async function detail(record: any) {
    const data = await queryAgvStatus({ taskCode: record.taskCode });
    if (data.retCode === '200') {
      taskList.value = data.responseBody.record;
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  }

  function afterVisibleChange(val: any) {
    if (!val) {
      showDrawer.value = !showDrawer.value;
    }
  }
  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 53);
  });
</script>

<template>
  <div>
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="aoColumns"
      :data="localTableData"
    >
      <template #index="{ record }">{{
        localTableData.indexOf(record) + 1
      }}</template>
      <template #action="{ record }">
        <a-popconfirm
          content="是否确认撤销这条任务?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button type="text" class="font-color">撤销</a-button>
        </a-popconfirm>
        <a-button type="text" class="font-color" @click="detail(record)"
          >任务详情</a-button
        >
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:pageSize="changeSize"
      />
    </div>
  </div>

  <a-drawer
    :width="800"
    :height="340"
    :visible="showDrawer"
    placement="right"
    :footer="false"
    @after-visible-change="afterVisibleChange"
    @cancel="showDrawer = !showDrawer"
  >
    <template #title> 任务详情 </template>
    <div>
      <a-table
        :stripe="true"
        class="top-table"
        :pagination="false"
        :columns="newColumns"
        :data="taskList"
        :scroll="{ y: 400 }"
        style="height: 250px"
      >
        <template #id="{ record }">{{
          localTableData.indexOf(record) + 1
        }}</template>

        <template #aoCode="{ record }"
          ><div :style="{ color: !record.isDailyPlan ? 'red' : '' }">
            {{ record.aoCode }}
          </div></template
        >
        <template #sortingStatus="{ record }">{{
          record.sortingStatus === '00'
            ? '未分拣'
            : record.sortingStatus === '02'
            ? '分拣完成'
            : record.sortingStatus === '04'
            ? '工艺更改'
            : '部分分拣'
        }}</template>
      </a-table>
    </div>
  </a-drawer>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
